function render(trackList) {
    // 1.找到插入容器元素
    var tbody = document.querySelector('tbody');
    // 2.遍历音频列表
    for (var i in trackList) {
        var track = trackList[i]
        var html = `<tr><td>${track.tid}</td><td>${track.title}</td><td>${track.refCount}</td></tr>`
        // 2.添加音频到html容器元素中
        tbody.innerHTML += html
    }
}

function renderNoLogin() {
    document.querySelector('.who').textContent = '登录后才能使用，请先登录'
}
function renderWho(user) {
    document.querySelector('.who').textContent = user.username+"欢迎使用欣乐听书"
}
function renderPagination(pagination) {
    var currentPage = parseInt(pagination.currentPage)
    if (currentPage === 1){
        document.querySelector('.prevPage').href += currentPage
    }else {
        document.querySelector('.prevPage').href += (currentPage - 1)
    }
    document.querySelector('.countPerPage').textContent = pagination.countPerPage
    document.querySelector('.currentPage').textContent = pagination.currentPage
    document.querySelector('.totalPage').textContent = pagination.totalPage
    if (currentPage === parseInt(pagination.totalPage)) {
        document.querySelector('.nextPage').href += currentPage
    }else {
        document.querySelector('.nextPage').href += (currentPage + 1)
    }
    document.querySelector('.lastPage').href += pagination.totalPage
}
// 1.让js代码在所有其他资源加载完成后才去执行,入口代码放在window的load事件处理中
window.onload = function () {
    // 说明所有资源都被加载好了

    //1.发起ajax请求
    var  xhr = new XMLHttpRequest()
    xhr.open("get","/studio/track/list.json" + location.search )

    xhr.onload = function () {
        if (xhr.status !== 200) {
            alert("后端JSON出错")
            return
        }
        // 2.增加调试信息
        console.log(this.responseText)
        // 3.尝试使用JSON进行解析(后端500,则响应不是JSON)
        var data = JSON.parse(this.responseText)
        // 4.判断是否登录,根据currentUser的值
        if (!data.currentUser) {
            // 没有登录
            renderNoLogin()
            return
        }

        renderWho(data.currentUser)
        renderPagination(data.pagination)
        render(data.trackList)
    }
    xhr.send()
}